<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <h4>通过事件向父组件发送数据</h4>
    <h3>子传父</h3>
    <div id="app">   
       <cpn @itemclick="cpnClick"></cpn>
    </div>
    <template id="cpn">
        <div>
           <button v-for="item in categories"
                  @click="btnClick(item)">{{item.name}}</button>
        </div>
      </template>
    <script>
        const cpn = {
            template: '#cpn',
            data () {
                return {
                    categories: [
                        {id: 'aaa', name: "热门推荐"},
                        {id: 'bbb', name: "手机数码"},
                        {id: 'ccc', name: "家用家电"},
                        {id: 'ddd', name: "电脑办公"}
                    ]
                }
            },
            methods: {
                btnClick(item) {
                    // console.log(item);
                    // 舰事件发送到父组件
                    this.$emit('itemclick' , item)
                }
            }
            
        }
        const app = new Vue({
            el: '#app',    
            data: {    
                message: '你好，vue',
                movies: ['海王','海贼王','海尔兄弟'] 
            },
            methods: {
                cpnClick(item) {
                    console.log('cpnClick')
                    console.log(item)
                }
            },
            components: {
                cpn
            }
        })
        
        

    </script>

    <h2>父子组件双向绑定</h2>
    <img src="../img/父子组件双向绑定.png" alt="">
    <h3>也可以用v-model + watch实现</h3>
    <img src="../img/父子双向绑定watch.png" alt="">
</body>
</html>